{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url   %}
<style type="text/css">
.block_slides{
  width: 100%;
  max-width: var(--general_layout_width);
  margin: 0 auto;
  position:relative;
}
.block_slides .slides {
    max-width: 1200px;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.slides-fill {
    width: 100%;
    max-width: 100%;
}

.slides-fill .slide-item-content {
    max-width: 1200px !important;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}

.slides-fill .swiper-small {
    max-width: 1200px !important;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);

}

.block_slides  .slide-item {
    display: block;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    position: relative;

}


.block_slides  .slide-item-big {
    height: 800px;
    width: 100%;
    object-fit: cover;
}

.block_slides  .slide-item-center {
    height: 600px;
    width: 100%;
    object-fit: cover;

}
.block_slides  .slide-item-samll {
    height: 420px;
    width: 100%;
    object-fit: cover;
}
.block_slides  .slide-item-auto {
    height: auto;
    width: 100%;
    object-fit: cover;
}


.block_slides .slide-item-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.block_slides .slide-item-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 110;
    box-sizing: border-box;
}

.block_slides .slide-item-content-left {
    align-items: flex-start;
}
.block_slides .slide-item-content-left .slide-item-title{
    text-align: left;
}
.block_slides .slide-item-content-left .slide-item-des {
    text-align: left;
    max-width: 385px;

}

.block_slides .slide-item-content-right {
    align-items: flex-end;
}

.block_slides .slide-item-content-right .slide-item-des {
    text-align: right;
    max-width: 385px;

}

.block_slides .slide-item-content-center {
    align-items: center;

}

.block_slides .slide-item-content-center .slide-item-des {
    max-width: 800px;
    text-align: center;
}

.block_slides .slide-item-content-right .slide-item .slide-item-des,
.block_slides .slide-item-content-left .slide-item .slide-item-des {
    max-width: 385px;
}



.block_slides .slide-item .slide-item-title {
    font-size: 56px;
    font-weight: 300;
    color: #ffffff;
    font-size: var(--title_font_size);
    color: var(--title_color);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
}

.block_slides .slide-item .slide-item-line {
    width: 50px;
    margin-top: 30px;
    border: 1px solid #ffffff;
}

.block_slides .slide-item .slide-item-des {
    margin-top: 30px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.block_slides .swiper-small {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    z-index: 100;
    box-sizing: border-box;
}

.block_slides .swiper-small .swiper-small-warp {
    overflow: hidden;
}

.block_slides .swiper-small .swiper-small-container {
    display: flex;
    align-items: center;
    transition: all 0.25s;
}

.block_slides .swiper-small .swiper-small-hanle {
    display: flex;
    align-items: center;
    float: left;
    padding: 0 10px;
}

.block_slides .swiper-small .swiper-small-item {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin: 0 10px;
}

.block_slides .swiper-small .swiper-small-item-active {
    background-color: #ffffff;
}

.block_slides .carousel-panel {
    width: 100%;
    overflow: hidden;
}

.block_slides .carousel-panel-container {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.block_slides .carousel-panel-container .carousel-panel-container-item {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}






 .block_slides .block-image-mobile{
    display: none;
  }
@media screen and (max-width: 768px) {
    .block_slides .slide-item .slide-item-title{
      font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    }
    .block_slides .slide-item .slide-item-des{
        font-size: 14px;
    }

    .block_slides  .slide-item-big {
        height: 600px;
    }
    .block_slides  .slide-item-center {
        height: 400px;
    }
    .block_slides  .slide-item-samll {
        height: 320px;
    }
    .block_slides .slide-item-content{
      padding:0 15px;
    }
}
@media screen and (max-width: 767px) {
    .block_slides .slide-item .slide-item-des{
        font-size: 14px;
    }
    .block_slides .block-image-mobile{
        display: block;
    }
    .block_slides .block-image-pc{
        display: none;
    }
    .block_slides  .slide-item-big {
        height: 100vh;
    }
    .block_slides  .slide-item-center {
        height: 70vh;
    }
    .block_slides  .slide-item-samll {
        height: 50vh;
    }


}
.block_slides .swiper-pagination-bullet{
  opacity: 1;
  background-color: #fff;
}
.block_slides .swiper-pagination-bullet-active{
  background: #333333;
}
.block_slides .swiper-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
}
.block_slides .swiper-pagination span {
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    margin: 0 3px;
    opacity: 1;
    box-sizing: border-box;
}

.block_slides .swiper-pagination span.swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    width: 10px;
    height: 10px;
}
.block_slides .block_slides_prev,
.block_slides .block_slides_next{
    position: absolute;
    right: 40px;
    bottom: -20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 6px 6px 0px rgb(0 0 0 / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s;
}
.block_slides .block_slides_prev{
    right: 95px;
}
.block_slides .block_slides_prev:hover,
.block_slides .block_slides_next:hover{
    transform: scale(1.1);
}
.block_slides .block_slides_prev svg,
.block_slides .block_slides_next svg{}
.block_slides .block_slides_next svg{
    transform: rotate(-180deg);
}

</style>
<div class="block_slides slides {% if section.settings.is_width_fill %}slides-fill{% endif %}">
    <div class="carousel-panel-container swiper-carousel-{{ block_id | default : section.block_id }}" id="swiper-carousel-{{ block_id | default : section.block_id }}">
        {% if section.blocks | size %}
        <input type="hidden" class="imgNumber" value="{{section.blocks | size}}"/>
        <ul class="swiper-wrapper">
            {% for block in section.blocks %}
            <li class="swiper-slide">
              
              {% capture cropType %}
              {%- unless section.settings.height  == 'auto' -%}
              data-crop-type="height"
              {%- endunless -%}
              {% endcapture %}
            
                <div class="slide-item carousel-panel-container-item">
                  <a href="{% if block.link.url %}{{ block.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}">
                    <img data-src="{{ block.pc_image.src }}" {{cropType}} src="{{ defaultImageEmpty }}"  alt="{{ block.pc_image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-pc" />
                    <img data-src="{{ block.mobile-image.src | default:block.pc_image.src  }}" {{cropType}} src="{{ defaultImageEmpty }}" alt="{{ block.mobile-image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-mobile" />
                    <div class="slide-item-mask" style="background-color:{{ block.mask_color }};opacity: {{ block.mask | divided_by : 100  }};"></div>
                    <div class="slide-item-{{ block_id | default : section.block_id }} slide-item-content slide-item-content-{{ block.position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
                        <div class="slide-item-title" style="color:{{ block.title_color }}">{{ block.title }}</div>
                       {% if block.subtitle != "" %}
                        <div class="slide-item-des" style="color:{{ block.title_color }}">{{ block.subtitle }}</div>
                        {% endif %}
                        {% if block.button_text %}
                        <span class="slide-item-btn main_btn" style="background-color:{{ block.button_background_color }};color:{{ block.button_font_color  }}">{{ block.button_text }}</span>
                        {% endif %}
                    </div>
                  </a>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <ul class="swiper-wrapper">
             <li class="swiper-slide">
                <div class="slide-item carousel-panel-container-item">
                    <img src="{{ 'banner@2x.png' | public_asset_abs_url }}"  class="slide-item-img slide-item-{{ section.settings.height }}" />
                </div>
            </li>
        </ul>
        {% endif %}
        <div class="swiper-pagination swiper-carousel-pagination-{{ block_id | default : section.block_id }}"></div>
    </div>
    <a class="block_slides_prev" href="javascript:void(0);">
        <svg class="" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.06 12.428a.6.6 0 0 1 0-.848l6.152-6.152a.3.3 0 0 1 .424 0l.594.594a.3.3 0 0 1 0 .424l-5.558 5.558 5.558 5.558a.3.3 0 0 1 0 .424l-.594.594a.3.3 0 0 1-.424 0L8.06 12.428z"></path></svg>
    </a>
    <a class="block_slides_next" href="javascript:void(0);">
        <svg class=" tw-rotate-180" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.06 12.428a.6.6 0 0 1 0-.848l6.152-6.152a.3.3 0 0 1 .424 0l.594.594a.3.3 0 0 1 0 .424l-5.558 5.558 5.558 5.558a.3.3 0 0 1 0 .424l-.594.594a.3.3 0 0 1-.424 0L8.06 12.428z"></path></svg>
    </a>

</div>
<div class="card-script">
<script type="text/javascript">
$(function() {
    new Swiper('.swiper-carousel-{{ block_id | default : section.block_id }}', {
        loop: true,
        effect: 'fade',
        autoHeight: true,
        autoplay:{% if section.settings.is_play and section.blocks.size >1  %}{delay: Number('{{section.settings.duration}}') * 1000}{% else %}false{% endif %},
        {% if section.blocks.size >1  %}
        pagination: {
            el: '.swiper-carousel-pagination-{{ block_id | default : section.block_id }}',
            clickable:true
        },
        {% endif %}
        navigation: {
            nextEl: '.block_slides_next',
            prevEl: '.block_slides_prev',
        }
    })
    var num = $('#swiper-carousel-{{ block_id | default : section.block_id }} .imgNumber').val();
    if(num == 1){
        $('#swiper-carousel-{{ block_id | default : section.block_id }} .block_slides_prev').hide();
        $('#swiper-carousel-{{ block_id | default : section.block_id }} .block_slides_next').hide();
    }
})
</script>
</div>

{% schema %}
{
  "tag": "",
  "class": "block_slides",
  "is_global": false,
  "name": {
    "zh_CN": "轮播图"
  },
  "max_blocks": "10",
  "blocks": [
    {
      "name": {
        "zh_CN": "轮播图片"
      },
      "type": "slide-item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "pc端图片"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420"
          },
          "id": "pc_image"
        },
        {
          "type": "card_image",
          "label": {
            "zh_CN": "移动端图片"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "尺寸建议1242*2000px"
          },
          "id": "mobile-image"
        },
        {
          "type": "card_select",
          "label": {
            "zh_CN": "标题按钮位置"
          },
          "id": "position",
          "option": [
            {
              "label": {
                "zh_CN": "居左"
              },
              "value": "left"
            },
            {
              "label": {
                "zh_CN": "居中"
              },
              "value": "center"
            },
            {
              "label": {
                "zh_CN": "居右"
              },
              "value": "right"
            }
          ],
          "default": "center"
        },
        {
          "type": "card_color",
          "label": {
            "zh_CN": "标题颜色"
          },
          "default": "#fff",
          "id": "title_color"
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题"
          },
          "id": "title",
          "default": "Image banner"
        },
        {
          "type": "card_text_editor",
          "label": {
            "zh_CN": "简短描述"
          },
          "id": "subtitle",
          "default": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store."
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接"
          },
          "id": "link",
          "default": {
            "type": "",
            "title": "",
            "url": ""
          }
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "按钮名称"
          },
          "id": "button_text",
          "default": "BUTTON LABEL"
        },
        {
          "type": "card_color",
          "label": {
            "zh_CN": "按钮背景"
          },
          "id": "button_background_color",
          "default": "#1D1F21"
        },
        {
          "type": "card_color",
          "label": {
            "zh_CN": "按钮文字颜色"
          },
          "id": "button_font_color",
          "default": "#fff"
        },
        {
          "type": "card_slider",
          "label": {
            "zh_CN": "蒙层透明度"
          },
          "id": "mask",
          "max": "100",
          "min": "0",
          "default": "20"
        },
        {
          "type": "card_color",
          "label": {
            "zh_CN": "蒙层颜色"
          },
          "id": "mask_color",
          "default": "#000"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "自动轮播"
      },
      "id": "is_play",
      "default": true
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "轮播时间(s)"
      },
      "default": "3",
      "max": 5,
      "min": 1,
      "id": "duration"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "图片高度"
      },
      "id": "height",
      "option": [
        {
          "label": {
            "zh_CN": "大"
          },
          "value": "big"
        },
        {
          "label": {
            "zh_CN": "中"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "小"
          },
          "value": "samll"
        },
        {
          "label": {
            "zh_CN": "自适应"
          },
          "value": "auto"
        }
      ],
      "default": "samll"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_width_fill",
      "default": true
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容"
      }
    }
  ],
  "default": {
    "settings": {
      "is_play": true,
      "duration": "3",
      "height": "samll",
      "is_width_fill": true
    },
    "blocks": [
      {
        "pc_image": {
          "src": "",
          "alt": ""
        },
        "mobile-image": {
          "src": "",
          "alt": ""
        },
        "position": "center",
        "title_color": "#fff",
        "title": "Image banner",
        "subtitle": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "button_text": "BUTTON LABEL",
        "button_background_color": "#1D1F21",
        "button_font_color": "#fff",
        "mask": "20",
        "mask_color": "#000",
        "block_type": "slide-item"
      }
    ]
  }
}
{% endschema %}